<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<table id="buytab" border="1" width="600" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>商品名称</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tabbody">

			</tbody>
			<tfoot>
				<tr>
					<th><input type="button" value="添加" onclick="addfun()" /></th>
					<th>总价<input type="text"></th>
				</tr>
			</tfoot>
		</table>
		<script type="text/javascript">
		

			/**
			 * 添加产品
			 */
			function addfun() {
				var tbody = document.getElementById("buytab").children[1];
				//创建TR
				//创建6个TD
				var tr = document.createElement("tr");
		
				var td2 = document.createElement("td");
				td2.innerHTML = "产品名称" + tbody.children.length;
				var td3 = document.createElement("td");
				td3.innerHTML = parseInt(Math.random() * 10000) + 1;
				var td4 = document.createElement("td");
				td4.innerHTML = "<input type='button'value='-'><input type='texe' value='1'size='1'/><input type='button'value='+'>";
				td4.getElementsByTagName("input")[0].onclick = function() {
					if(td4.getElementsByTagName("input")[1].value > 0) {
						td4.getElementsByTagName("input")[1].value--;
						td5.innerHTML = td3.innerHTML * td4.getElementsByTagName("input")[1].value;
					}
				}
				td4.getElementsByTagName("input")[2].onclick = function() {
					td4.getElementsByTagName("input")[1].value++;
					td5.innerHTML = td3.innerHTML * td4.getElementsByTagName("input")[1].value;
				}

				var td5 = document.createElement("td");
				td5.innerHTML = td3.innerHTML;
				var td6 = document.createElement("td");
				td6.innerHTML = "<input type='button'value='X'onclick='deltr(this)' />"
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
				tbody.appendChild(tr)
			}

			function deltr(t) {
				var tbody = document.getElementById("buytab").children[1];
				tbody.removeChild(t.parentNode.parentNode)
			}
		</script>
	</body>

</html>